{% extends base.html %}

{% block head %}

<link rel="stylesheet" href="/static/lib/codemirror/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/xq-light.css">
<script type="text/javascript" src="/static/lib/codemirror/codemirror.min.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/clike/clike.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/shell.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/python.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/javascript.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/markdown.js"></script>

{% if path.endswith(".php") %}
<script type="text/javascript" src="/static/lib/codemirror/mode/php.js"></script>
{% end %}

<style type="text/css">

.search-key {
    background-color: #FF8000;
    color: #000;
}

/**
#editorArea {
    height: 400px;
    overflow: auto;
}
*/

</style>
{% end %}

{% block body %}
{% init pathlist = [] %}

<div class="fs-path">
    <a href="/fs//">Home</a> /
    {% for item in pathlist %}
        <a href="/fs/{{ item.path }}">{{ item.name }}</a> / 
    {% end %}
</div>

<div class="col-md-12">
    <p style="color:red">{{?error}}</p>
</div>
<textarea id="content" class="hide">{{content}}</textarea>
<form method="POST" action="/code/view_source/update">
<div class="col-md-12">
    <div class="col-md-12 bottom-offset-1">
        <input type="submit" value="保存">
        {% if path.endswith(".md") %}
            <input type="button" class="link-btn" href="/code/preview?path={{path}}" value="预览">
        {% end %}
    </div>
    <input name="path" class="hide" value="{{path}}"/>
    <div id="editorArea" class="col-md-12">
        <textarea name="content" id="editor">{{content}}</textarea>
    </div>
</div>
</form>

{# TODO 需要处理下搜索的高亮 #}

<script type="text/javascript">
    $(function () {

        var mode = "text/x-c";
        var name = getUrlParams().path;
        if (name.endsWith(".py")) {
            mode = "text/x-python";
        }
        if (name.endsWith(".js")) {
            mode = "text/javascript";
        } 
        if (name.endsWith(".c")) {
            mode = "text/x-c";
        } 
        if (name.endsWith(".java")) {
            mode = "text/x-java";
        } 
        if (name.endsWith(".md")) {
            mode = "text/x-markdown";
        } 
        if (name.endsWith(".sh") || name.endsWith(".command")) {
            mode = "text/x-sh";
        } 
        if (name.endsWith(".php")) {
            mode = "text/x-php";
        }
        var editor = CodeMirror.fromTextArea($("#editor")[0], {
            lineNumbers: true,
            mode: mode,
            // theme:"monokai",
            // theme:'xq-light',
            indentUnit:4,
            lineWrapping: true
        });
        editor.on("update", function (codeMirror, changeObj) {
            console.log("update");
            $("#editor").val(codeMirror.doc.getValue());
        })
        editor.setSize("auto", "auto");
        editor.setOption("extraKeys", {
            Tab: function(cm) {
                var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
                cm.replaceSelection(spaces);
            }
        });
        window.codeMirror = editor;
    });
</script>
{% end %}